<template>
  <ul class="friendsLis">
    <li v-for="[initials, { value }] in friendsData" :key="initials">
      <div class="friendsLis-initials">{{ initials }}</div>
      <ul>
        <li
          v-for="[key, { avatar, remark }] in value"
          :key="key"
          @contextmenu.prevent="openMenu(initials, key, $event)"
        >
          <router-link
            :class="{
              'friendsLis-item': true,
              'active-listLi--item': currentInitials === initials && currentId === key,
            }"
            :to="{ name: 'friendInfo', query: { userId: key }, params: { initials } }"
            ><img class="friendsLis-item__avatar" :src="avatar" alt="" />
            <span class="friendsLis-item__remark">{{ remark }}</span></router-link
          >
        </li>
      </ul>
    </li>
  </ul>
  <opear-menu
    ref="menu"
    v-model="showMenu"
    :other-id="operateId"
    :operate-initials="operateInitials"
  ></opear-menu>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, onMounted, watch, nextTick, onBeforeUnmount } from "vue";
import { useRoute } from "vue-router";
import Trigger from "@/plugins/rigClickOpMen";
import opearMenu from "./opearMenu.vue";

const props = defineProps<{
  friendsData: Map<string, Friend>;
  selfId: string;
}>();

const route = useRoute();

/**
 * 当前用户查看某个朋友信息的userId
 */
const currentId = ref<string>("");
/**
 * 当前用户查看某个朋友信息的备注首字母
 */
const currentInitials = ref<string>("");

watch(
  () => route.query.userId as string,
  (newId: string) => (currentId.value = newId)
);

watch(
  () => route.params.initials as string,
  (newInitials: string) => (currentInitials.value = newInitials)
);

const trigger = ref<Trigger>();

onBeforeMount(() => {
  if (route.query.userId) currentId.value = route.query.userId as string;
  if (route.params.initials) currentInitials.value = route.params.initials as string;
});

onMounted(() =>
  setTimeout(() => {
    const ele: HTMLElement = document.getElementById("contact-list") as HTMLElement;
    trigger.value = new Trigger(ele);
    trigger.value.resize();
  })
);

onBeforeUnmount(() => trigger.value?.removeResize());

/**
 * 是否需要打开鼠标右击后出现的菜单
 */
const showMenu = ref<boolean>(false);
/**
 * 给鼠标右击出现的菜单元素组件一个ref属性，便于通过$refs访问
 */
const menu = ref<typeof opearMenu>();
/**
 * 当前用户选择的好友的userId
 */
const operateId = ref<string>("");
/**
 * 当前用户选择的好友的备注名首字母
 */
const operateInitials = ref<string>("");
/**
 * 鼠标右键打开操作菜单
 */
const openMenu: (initials: string, otherId: string, $event: MouseEvent) => void = (
  initials: string,
  otherId: string,
  $event: MouseEvent
): void => {
  const friendData = props.friendsData.get(initials)?.value.get(otherId)!;
  if (!friendData?.isSendLoading) {
    showMenu.value = true;
    operateId.value = otherId;
    operateInitials.value = initials;
    nextTick(() =>
      trigger.value?.computedDirection(menu.value?.$refs.menu as HTMLDListElement, $event)
    );
  }
};

/**
 * 关闭右击菜单
 */
const closeMenu = () => (showMenu.value ? (showMenu.value = false) : undefined);

defineExpose({
  closeMenu,
});
</script>

<style lang="scss" scoped>
.friendsLis {
  margin-top: 10px;

  &-initials {
    padding: 10px 0 6px 20px;
    color: #8e8e8e;
  }

  &-item {
    display: flex;
    align-items: center;
    padding: 14px 23px;
    transition: background-color 0.25s;

    &:hover {
      background-color: rgba(193, 191, 191, 0.114);
    }

    &__avatar {
      @include setWidHei(40px, 40px);
      object-fit: cover;
      border-radius: 50%;
      margin-right: 15px;
    }

    &__remark {
      display: inline-block;
      max-width: 50%;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
